<template>
    <div>
        <h2>房号列表</h2>
        <div>
          
            <input type="button" class="btn btn-info" value="上架" @click="housestate(1)">
            <input type="button" class="btn btn-warning" value="下架" @click="housestate(0)">
          
        </div>
        <table class="table table-bordered">
            <tbody>

                <tr class="bg-primary">
                    <td><input type="checkbox"></td>
                    <td>房号</td>
                    <td>房型</td>
                    <td>备注</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>


                <tr v-for="item in list" :key="item.Id">
                    <td><input type="checkbox" :value="item.Id" v-model="ids"></td>
                    <td>{{item.Number}}</td>
                    <td>
                        <span v-if="item.HouseTypeId==1">单人房</span>
                        <span v-if="item.HouseTypeId==2">情侣房</span>
                        <span v-if="item.HouseTypeId==3">双房</span>
                        <span v-if="item.HouseTypeId==4">单人房</span>
                        <span v-if="item.HouseTypeId==5">大床房</span>
                    </td>
                    <td>{{item.BeiZhu}}</td>
                    <td>{{item.State==1?'上架':'下架'}}</td>
                    <td>
                        <input type="button" value="编辑" class="btn btn-info" @click="edit(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()



//储存全选Id
let ids = ref([]);
//单选框没选中
let checked = ref(false);

//房型列表
onMounted(() => {
    getlist();
    HouseNoAddList();//房号列表
})




let list: any = ref([]);

//房号列表
const HouseNoAddList = () => {

    axios({
        url: 'https://localhost:7059/api/HouseType/HouseNoList',
        method: 'get',
    })
        .then((res) => {

            console.log(res);
            list.value = res.data;
        }
        )
            .catch((err) => {
                console.log(err);
            })

}




//获取数据批量上下架
const housestate=(State:any)=>{

if(ids.value.length<=0){
alert('请选择要操作的数据');
return;
}

axios({
    url: 'https://localhost:7059/api/HouseType/HouseNoState',
    method: 'put',
    params: {
        ids: ids.value.toString(),
        State: State
    }
})
    .then((res) => {
        console.log(res);
       if(res.data==1){
        alert('修改成功');
        checked.value=false;
        ids.value=[];
        HouseNoAddList();//房号列表
       }
       else{
        alert('修改失败');
       }
    }
    )
        .catch((err) => {
            console.log(err);
        })

}






//编辑
const edit = (Id: any) => {
    router.push({
        path: '/HouseNoUpd',
        query: {
            Id: Id
        }
    })
}









let model = reactive({
    HouseTypeName: '',
    index: 1,
    size: 2,

})

let data: any = reactive({
    list: [],
    count: 0,
    page: 0,

})





//显示
const getlist = () => {


    axios({
        url: 'https://localhost:7059/api/HouseType/HouseTypeList',
        method: 'get',
        params: model,

    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;
        })
        .catch((err) => {
            console.log(err);
        })

}
</script>

<style scoped></style>